---
layout: page
css: ["index.css"]
---
<div class="row">
    {% for post in paginator.posts %}
    <div class="col s12">
        <div class="card hoverable" style="color:#fff">
            <div class="card-content" style="background-color:#699">
                <span id="post-title" class="card-title">{{post.title}}</span>
                <p id="post-date">
                    <i class="material-icons">date_range</i>
                    {{post.date | date: "%d/%m/%Y %H:%M"}}
                </p>
                <p id="post-content">{{post.excerpt | remove: '<p>' | remove: '</p>'}}</p>
            </div>
            <div class="card-action" style="background-color:#688">
                <a href="{{post.url | prepend: site.baseurl}}">
                    开始阅读
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
    <div class="col s12 center-align">
        <ul class="pagination">
            <li class="{% unless paginator.previous_page %}disabled{% else %}waves-effect{% endunless %}">
                {% if paginator.previous_page %}
                {% if paginator.previous_page == 1 %}
                <a href="/">
                    {% else %}
                    <a href="/page{{paginator.previous_page}}">
                        {% endif %}
                        {% else %}
                        <a href="#!">
                            {% endif %}
                            <i class="material-icons">chevron_left</i>
                        </a>
            </li>
            {% if paginator.page == 1 %}
            <li class="active teal">
                <a href="#!">1</a>
                {% else %}
            <li class="waves-effect">
                <a href="/">1</a>
                {% endif %}
            </li>
            {% for count in (2..paginator.total_pages) %}
            {% if count == paginator.page %}
            <li class="active teal"><a href="#!">{{count}}</a></li>
            {% else %}
            <li class="waves-effect"><a href="/page{{count}}">{{count}}</a></li>
            {% endif %}
            {% endfor %}
            <li class="{% unless paginator.next_page %}disabled{% else %}waves-effect{% endunless %}">
                {% if paginator.next_page %}
                <a href="/page{{paginator.next_page}}">
                    {% else %}
                    <a href="#!">
                        {% endif %}
                        <i class="material-icons">chevron_right</i>
                    </a>
            </li>
        </ul>
    </div>
</div>